<template>
  <svg-icon
    icon-class="search"
    class="search-icon"
    style="font-size: 20px"
    @click="dialogVisible = true"
  ></svg-icon>

  <el-dialog v-model="dialogVisible" :append-to-body="true" :fullscreen="isMobile()">
    <el-container>
      <el-header class="search-header">
        <el-input v-model="data.keywords" class="search-input" placeholder="输入文章标题或内容...">
          <template #prefix>
            <svg-icon
              icon-class="search-inner"
              class="search-icon"
              style="font-size: 32px; margin-right: 10px"
            ></svg-icon>
          </template>
        </el-input>
      </el-header>
      <el-main>
        <!-- 搜索结果 -->
        <el-scrollbar class="search-result-wrapper">
          <!--搜索到的文章列表-->
          <ul style="list-style: none; padding: 0">
            <li v-for="item of data.articleList" :key="item.id" class="search-result">
              <!-- 文章标题 -->
              <el-card shadow="hover">
                <el-link :underline="false" @click="goTo(item.id)">
                  <div>
                    <h3 class="search-result-title" v-html="item.title"></h3>
                    <p class="search-result-content" v-html="item.summary"></p>
                  </div>
                  <!-- 文章内容 -->
                </el-link>
              </el-card>
            </li>
          </ul>
          <!-- 搜索结果不存在提示 -->
          <div v-show="showNotFundTip()" class="no-result-find-box" style="font-size: 0.875rem">
            <svg-icon icon-class="no-result-find" class="no-result-find-svg"></svg-icon>
            <div class="no-result-find-tip">找不到您查询的内容：{{ data.keywords }}</div>
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getSearch } from '@/api/article'

const dialogVisible = ref(false)

const data = reactive({
  keywords: '',
  articleList: [],
  flag: false
})
function reset() {
  data.keywords = ''
  data.articleList = []
  data.flag = false
}
const router = useRouter()
// 页面跳转
function goTo(id: any) {
  dialogVisible.value = false
  router.push({ path: `/article/${id}` })
}

// 判断屏幕大小
function isMobile() {
  reset()
  const { clientWidth } = document.documentElement
  return clientWidth <= 960
}

const showNotFundTip = () => {
  return data.flag && data.articleList && data.articleList.length === 0
}

// 观察搜索输入，并调用接口
watch(
  () => data.keywords,
  () => {
    data.flag = data.keywords.trim() !== ''
    if (data.flag) {
      getSearch(data.keywords).then(({ data: res }) => {
        data.articleList = res.data
      })
    }
  }
)
</script>

<style scoped lang="scss">
.search-header {
  border-bottom: 2px solid #ececec;
  .search-input {
    :deep(.el-input__wrapper) {
      font-size: 20px;
      font-weight: bold;
      box-shadow: none !important;
    }
  }
}

@media screen and (min-width: 760px) {
  .search-result-wrapper {
    padding-right: 5px;
    height: 450px;
    overflow: auto;
  }
}
@media screen and (max-width: 759px) {
  .search-result-wrapper {
    overflow: auto;
  }
}
.search-result {
  a {
    color: #555;
    /*border-bottom: 1px solid #999;*/
    text-decoration: none;
  }
  .search-result-title:hover {
    color: #f4d154;
    transition: all 0.3s ease-in-out;
  }
  .search-result-content {
    color: #888888;
    cursor: pointer;
    padding: 5px 0;
    line-height: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

.no-result-find-box {
  text-align: center;
  .no-result-find-svg {
    font-size: 200px;
  }
  .no-result-find-tip {
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
